<template>
	<!-- 证件照打印  小程序终端证件照spu1015-->
	<view class="box">
		<scroll-view scroll-x="true" :scroll-into-view="scrollInto">
			<view class="tab  flex align-center just-center">
				<view class="tab-new w-50 h-100 flex just-center align-center" v-for="(item,index) in list"
					:id="'tab'+index" :key="index" @click="addList(index)"
					:class="index===listIndex ?'activeColor Medium':'tabActiveColor Medium'">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<!-- 内容显示区域 -->
		<!--  常用寸照 -->
		<view v-if="listIndex==0">
			<view class="flex just-between flex-wrap">
				<block v-for="(item,index) in certificateList" :key="index">
					<!-- 标题title尺寸jianj @click="idAdd(item.jianj,item.title)"-->
					<view class="certificate flex-column align-center just-center" @click="idAdd(item,index)">
						<!-- 头像 -->
						<view class="certificate-head">
							<image :src="item.img" style="width: 100%;height: 100%;">
							</image>
						</view>
						<!-- 标准一寸 -->
						<view class="certificate-title Bold flex align-center just-center">
							{{item.name}}
						</view>
						<!-- 参数 -->
						<view class="certificate-parameter Medium flex align-center just-center">
							{{item.jianj}}{{item.subtitle}}
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 其他证件照 -->
		<view v-else>
			<view class="service">
				<x-title title="资格考试" leftpx="24"></x-title>
				<x-banner :classbanner='false' modebool="widthFix" wRpx="66" hRpx="66" :printList="qualification"
					@clickPrint="qualificat">
				</x-banner>
			</view>
			<view class="service">
				<x-title title="签证" leftpx="24"></x-title>
				<x-banner :classbanner='false' modebool="widthFix" wRpx="66" hRpx="66" :printList="certificate"
					@clickPrint="qualificat">
				</x-banner>
			</view>
		</view> 
		<u-popup v-model="show" mode="bottom" width="500rpx" height="200px">
			<view class="" style="padding: 0rpx 30rpx;">
				<view class="" style="text-align: center;margin: 20rpx 0rpx;font-size: 30rpx;font-weight: bold;">
					请选择照片底色
				</view>
				<view class="just-between">
					<view class="color aj-center" :class="numactive==index ? 'coloractive' : 'colorerror'"
						v-for="(item,index) in colorImg" :key="index" @click="imglist(item,index)">
						{{item}}
					</view>
				</view>
				<view class="flex just-between" style="margin: 42rpx 20rpx;">
					<view class="colorfalse  aj-center" @click="showfalse">
						取消
					</view>
					<view class="colortrue aj-center" @click="showtrue">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numactive: 5, //判断底色的颜色
				listIndex: 0,
				scrollInto: '',
				show: false,
				idadd: '', //选第一个切换蓝择的尺寸
				colorImg: ["蓝色", "白色", "红色"],
				list: [{
						id: 0,
						name: '常用寸照'
					},
					{
						id: 1,
						name: '其他证件照'
					}
				],
				// 其他证件照---签证
				certificate: [{
						id: 1,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/china@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '中国签证',
						skuid: "1015027", //sku 
						setTitle: '尺寸信息：390*567', //基础设置尺寸
						specId: "233", //规格id 
						colorText: '白色',
						path: '', //文件链接 
						orderId: ''
					},
					{
						id: 2,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/hk@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '港澳台通行证',
						skuid: "1015028",
						setTitle: '尺寸信息：390*567', //基础设置尺寸
						specid: "71",
						colorText: '白色',
						path: '', //文件链接 
						orderId: ''
					},
					{
						id: 3,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/usa@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '美国签证',
						skuid: "1015029",
						setTitle: '尺寸信息：600*600', //基础设置尺寸
						specid: "119",
						appletIdPhones: true, //判断首页是否加载
						colorText: '白色',
						appletIdPhones: true, //判断首页是否加载
						setColor: true, //控制蓝色打印按钮是否显示===>本次为true 
						path: '', //文件链接
						Set: true, //是否显示基本设置
						orderId: ''
					},
					{
						id: 4,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/js@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '日本签证',
						skuid: "1015030",
						specid: "118",
						setTitle: '尺寸信息：531*531', //基础设置尺寸 
						colorText: '白色',
						path: '', //文件链接 
						orderId: ''
					},
					{
						id: 5,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/kor@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '韩国签证',
						skuid: "1015031",
						setTitle: '尺寸信息：413*579', //基础设置尺寸
						specid: "116",
						colorText: '白色',
						path: '', //文件链接 
						orderId: ''
					},
					{
						id: 6,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/ou@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '欧洲签证',
						skuid: "1015032",
						setTitle: '尺寸信息：413*531', //基础设置尺寸
						specid: "691",
						colorText: '白色',
						path: '', //文件链接 Set: true, //是否显示基本设置
						orderId: ''
					},
					{
						id: 7,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/sa@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '美洲签证',
						skuid: "1015033",
						setTitle: '尺寸信息：600*600', //基础设置尺寸
						specid: "119",
						colorText: '白色',
						path: '', //文件链接 
						orderId: ''
					},
					{
						id: 8,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/as@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '澳洲签证',
						setTitle: '尺寸信息：413*579', //基础设置尺寸
						skuid: "1015034",
						specid: "545",
						colorText: '白色',
						path: '', //文件链接 
						orderId: ''
					},
				],
				// 其他证照 资格考试
				qualification: [{
						id: 1,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/putong@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '普通话',
						setTitle: '尺寸信息：390*567', //基础设置尺寸
						skuid: "1015017",
						specid: "260",
						colorText: '白色',
						path: '', //文件链接
						orderId: ''
					},
					{
						id: 2,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/civilservant@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '公务员',
						setTitle: '尺寸信息：413*579', //基础设置尺寸
						skuid: "1015018",
						specid: "693",
						colorText: '白色',
						path: '', //文件链接
						orderId: ''
					},
					{
						id: 3,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/guide@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '导游证',
						setTitle: '尺寸信息：413*531', //基础设置尺寸
						skuid: "1015021",
						specid: "234",
						colorText: '白色',
						path: '', //文件链接
						orderId: ''
					},
					{
						id: 4,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/healthy@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '健康证',
						setTitle: '尺寸信息：295*413', //基础设置尺寸
						skuid: "1015020",
						specid: "187",
						colorText: '白色',
						path: '', //文件链接
						orderId: ''
					},
					{
						id: 5,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/examination@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '成人自考',
						skuid: "1015019",
						setTitle: '尺寸信息：400*576', //基础设置尺寸
						specid: "196",
						colorText: '白色',
						path: '', //文件链接
						orderId: ''
					},
					{
						id: 6,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/ielts@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '雅思考试',
						setTitle: '尺寸信息：390*567', //基础设置尺寸
						skuid: "1015025",
						specid: "216",
						colorText: '白色',
						path: '', //文件链接
						orderId: ''
					},
					{
						id: 7,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/teacher@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						name: '教师资格',
						skuid: "1015016",
						setTitle: '尺寸信息：360*480', //基础设置尺寸
						specid: "370",
						colorText: '白色',
						path: '', //文件链接
						orderId: ''
					},
					{
						id: 8,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/research@2x.png',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo 
						name: '研究生',
						setTitle: '尺寸信息：390*567', //基础设置尺寸
						skuid: "1015024",
						specid: "227",
						colorText: '白色',
						path: '', //文件链接 
						orderId: ''
					},
				],
				// 常用寸照
				certificateList: [{
						id: 0,
						img: '../static/avatar4@2x.png',
						name: '标 准 一 寸',
						// jianj: '25*35mm',
						jianj: '295*413',
						subtitle: '| 白 蓝 红',
						skuIdBlue: "1015001",
						skuIdWhite: "1015002",
						skuIdRed: "1015003",
						specIdBlue: "1", //蓝底
						specIdWhite: "2", //白底
						specIdRed: "3", //红底
						path: '',
						orderId: '',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						setTitle: '尺寸信息：25*35mm', //基础设置尺寸 
						colorText: '', //默认值
						setColor: false, //控制蓝色打印按钮是否显示===>本次为true 
						skuid: '',
						specid: '', //规格
					},
					{
						id: 1,
						img: '../static/avatar2@2x.png',
						name: '小一 寸',
						jianj: '260*378',
						subtitle: '| 白 蓝 红',
						skuIdBlue: "1015004",
						skuIdWhite: "1015005",
						skuIdRed: "1015006",
						specIdBlue: "4",
						specIdWhite: "5",
						specIdRed: "6",
						path: '',
						orderId: '',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						setTitle: '尺寸信息：25*35mm', //基础设置尺寸 
						colorText: '', //默认值 
						skuid: '',
						specid: '', //规格

					},
					{
						id: 2,
						img: '../static/avatar@2x.png',
						name: '大 一 寸',
						jianj: '390*567',
						subtitle: '| 白 蓝 红',
						skuIdBlue: "1015007",
						skuIdWhite: "1015008",
						skuIdRed: "1015009",
						specIdBlue: "7",
						specIdWhite: "8",
						specIdRed: "9",
						path: '',
						orderId: '',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo 
						setTitle: '尺寸信息：25*35mm', //基础设置尺寸 
						colorText: '', //默认值 
						skuid: '',
						specid: '', //规格
					},
					{
						id: 3,
						img: '../static/avatar3@2x.png',
						name: '标准二寸',
						jianj: '413*579',
						subtitle: '| 白 蓝 红',
						skuIdBlue: "1015010",
						skuIdWhite: "1015011",
						skuIdRed: "1015012",
						specIdBlue: "10",
						specIdWhite: "11",
						specIdRed: "12",
						path: '',
						orderId: '',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						setTitle: '尺寸信息：25*35mm', //基础设置尺寸 
						colorText: '', //默认值
						setColor: false, //控制蓝色打印按钮是否显示===>本次为true 
						skuid: '',
						specid: '', //规格
					},
					{
						id: 4,
						img: '../static/avatar5@2x.png',
						name: '小二寸',
						jianj: '413*531',
						subtitle: '| 白 蓝 红',
						skuIdBlue: "1015013",
						skuIdWhite: "1015014",
						skuIdRed: "1015015",
						specIdBlue: "13",
						specIdWhite: "14",
						specIdRed: "15",
						path: '',
						orderId: '',
						imglogo: 'https://oss.xhm2006.com/Public/WechatApplet/photo@2x.png', //顶部logo
						setTitle: '尺寸信息：25*35mm', //基础设置尺寸  
						colorText: '', //默认值 
						setColor: false, //控制蓝色打印按钮是否显示===>本次为true 
						skuid: '', //sku
						specid: '', //规格
					},
				],
			}
		},
		onLoad(option) {
			console.log(option, 'option')
			if (typeof option.messageList == 'string' && option.messageList != undefined) {
				var messageListImgApp = JSON.parse(option.messageList)
				console.log(messageListImgApp)
				for (let i = 0; i < this.certificateList.length; i++) {
					this.certificateList[i].path = messageListImgApp[0].tempFilePaths;
					this.certificateList[i].orderId = messageListImgApp[0].orderId;
				}
				for (let i = 0; i < this.qualification.length; i++) {
					this.qualification[i].path = messageListImgApp[0].tempFilePaths;
					this.qualification[i].orderId = messageListImgApp[0].orderId;
				}
				for (let i = 0; i < this.certificate.length; i++) {
					this.certificate[i].path = messageListImgApp[0].tempFilePaths;
					this.certificate[i].orderId = messageListImgApp[0].orderId;
				}
				console.log(this.certificateList, 'certificateList')
			}
		},
		methods: {
			showfalse() {
				console.log('取消')
				this.show = false;
				this.numactive = 5
			},
			showtrue() {
				if (this.numactive != '5') {
					this.show = false;
					var jsondata = JSON.stringify(this.certificateList[this.idadd]);
					uni.redirectTo({
						url: './submitIdPhoneImgApp?messageList=' + jsondata,
					})
				} else {
					uni.showToast({
						title: '请选择照片底色',
						icon: 'none'
					})
				}
			},
			// 点击选择照片的底色
			imglist(value, num) {
				this.numactive = num;
				console.log(num)
				console.log(value)
				if (value == '蓝色') {
					this.certificateList[this.idadd].colorText = '蓝色';
					this.certificateList[this.idadd].setColor = true;
					this.certificateList[this.idadd].skuid = this.certificateList[this.idadd].skuIdBlue;
					this.certificateList[this.idadd].specid = this.certificateList[this.idadd].specIdBlue;
				} else if (value == '白色') {
					this.certificateList[this.idadd].colorText = '白色';
					this.certificateList[this.idadd].setColor = true;
					this.certificateList[this.idadd].skuid = this.certificateList[this.idadd].skuIdWhite;
					this.certificateList[this.idadd].specid = this.certificateList[this.idadd].specIdWhite;
				} else if (value == '红色') {
					this.certificateList[this.idadd].colorText = '红色';
					this.certificateList[this.idadd].setColor = true;
					this.certificateList[this.idadd].skuid = this.certificateList[this.idadd].skuIdRed;
					this.certificateList[this.idadd].specid = this.certificateList[this.idadd].specIdRed;
				}
			},
			// 点击选择证件照
			idAdd(item, num) {
				this.idadd = num;
				this.show = true;
			},
			addList(index) {
				if (this.listIndex === index) {
					return;
				}
				this.listIndex = index;
				this.scrollInto = 'tab' + index
			},
			qualificat(index) {
				uni.redirectTo({
					url: './submitIdPhoneImgApp?messageList=' +
						JSON.stringify(this.qualification[index])
				})
			},
			// 签证
			certific(index) {
				console.log('签证', index)
				uni.redirectTo({
					url: './submitIdPhoneImgApp?messageList=' +
						JSON.stringify(this.certificate[index])
				})
			}

		}
	}
</script>

<style>
	.coloractive {
		background: linear-gradient(45deg, #FF9566, #FF5F62);
		border-radius: 14px;
		color: white;
	}

	.colorfalse {
		width: 270rpx;
		border-radius: 14px;
		height: 76rpx;
		background-color: #F7F7F7;
		font-size: 32rpx;
		font-weight: bold;
	}

	.colortrue {
		background: linear-gradient(45deg, #FF9566, #FF5F62);
		width: 270rpx;
		border-radius: 14px;
		height: 76rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.color {
		/* border: 1px solid red; */
		width: 200rpx;
		height: 76rpx;
		margin: 0rpx 20rpx;
		border-radius: 28rpx;
		font-size: 32rpx;
	}

	.colorerror {
		background: #F7F7F7;
	}

	.service {
		margin: 50rpx 0rpx 0rpx 0rpx;
		/* padding: 40rpx; */
		padding-top: 40rpx;
		/* height: 213px; */
		background: #FFFFFF;
		box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 0.5);
		border-radius: 10px;
	}

	.box {
		width: 100%;
		padding: 10rpx 30rpx 0rpx 30rpx;
	}

	.tab {
		width: 100%;
		height: 98rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 10px;
	}

	/* tab切换未选中的状态 */
	.tabActiveColor {
		/* background: #FFFFFF; */
		color: #222222;
		line-height: 44px;
		box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 0.5);
	}

	/* tab切换选中的状态 */
	.activeColor {
		/* color: white; */
		font-size: 14px;
		color: #FFFEFE;
		line-height: 44px;
		background: linear-gradient(90deg, #FF9566, #FF5F62);
	}

	.certificate {
		width: 326rpx;
		height: 274rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 0.5);
		border-radius: 10px;
		margin-top: 40rpx;
		/* padding: 40rpx 56rpx 40rpx 56rpx; */
		padding: 40rpx 56rpx 40rpx 41rpx;

	}

	.certificate-head {
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 40rpx;
	}

	.certificate-title {
		width: 100%;
		height: 26rpx;
		margin-bottom: 20rpx;
		font-size: 14px;
		color: #222222;
	}

	.certificate-parameter {
		font-size: 12px;
		color: #999999;
	}
</style>
